<template>
  <v-card>
    <div v-if="activity">
      <v-toolbar flat color="blue" dark height="50">
        <v-spacer></v-spacer>
        <v-toolbar-title>更改活动</v-toolbar-title>
        <v-spacer></v-spacer>
      </v-toolbar>
      <v-container class="pa-10">
        <!-- 标题 -->
        <v-card flat>
          <h4 class="my-2">标题</h4>
          <v-text-field
            hide-details=""
            placeholder="尽量言简意赅"
            dense
            outlined
            v-model="activity.title"
          ></v-text-field>
        </v-card>
        <!-- 详情 -->
        <v-card class="mt-5" flat>
          <h4 class="my-2">活动详情</h4>
          <v-textarea
            placeholder="描述活动内容详情"
            outlined
            auto-grow
            v-model="activity.description"
          ></v-textarea>
        </v-card>
        <!-- 时间 -->
        <v-card flat>
          <h4 class="my-2">时间</h4>
          <v-row>
            <v-col>
              <!-- 开始时间 -->
              <v-text-field
                label="开始时间（格式: 2021-12-31 16:40）"
                placeholder="开始时间（格式: 2021-12-31 16:40）"
                dense
                outlined
                v-model="activity.starttime"
              ></v-text-field>
            </v-col>
            <v-col>
              <!-- 结束时间 -->
              <v-text-field
                label="结束时间（格式: 2021-12-31 16:40）"
                placeholder="结束时间（格式: 2021-12-31 16:40）"
                outlined
                dense
                v-model="activity.endtime"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-card>
        <!-- 地点 -->
        <v-card flat>
          <h4 class="my-2">地点</h4>
          <v-row>
            <v-col>
              <!-- 出发地 -->
              <v-text-field
                label="从哪里出发"
                placeholder="从哪里出发"
                dense
                outlined
                v-model="activity.from"
              ></v-text-field>
            </v-col>
            <v-col>
              <!-- 目的地 -->
              <v-text-field
                label="输入活动的目的地"
                placeholder="输入活动的目的地"
                outlined
                dense
                v-model="activity.to"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-card>
        <!-- 类别、人数、信用值 -->
        <v-card class="mt-0" flat>
          <h4 class="my-2">类别和人数限制</h4>
          <v-row>
            <v-col>
              <!-- 类别 -->
              <v-select
                :items="types"
                label="类别"
                placeholder="类别"
                dense
                outlined
                v-model="activity.typ_e"
              ></v-select>
            </v-col>
            <v-col>
              <!-- 人数限制 -->
              <v-text-field
                hide-details=""
                label="人数上限"
                placeholder="人数上限"
                outlined
                dense
                v-model="activity.sum"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-card>
        <!-- 提交按钮 -->
        <v-row class="mt-5" flat justify="center">
          <v-col class="col-2"
            ><v-btn color="blue" dark block @click="updateActivity"
              >更新</v-btn
            ></v-col
          >
        </v-row>
      </v-container>
    </div>
  </v-card>
</template>

<script>
import axios from "axios";

export default {
  name: "Create",
  data() {
    return {
      activity: {
        id: null,
        title: "",
        from: "",
        to: "",
        starttime: "",
        endtime: "",
        description: "",
        currents: 1,
        sum: "",
        typ_e: "",
      },
      types: ["运动", "出行", "其他"],
    };
  },
  methods: {
    // 获取活动信息
    async getActInfo() {
      let id = this.$route.params.id;
      await axios.get("activities/" + id).then((res) => {
        if (res.data.error_code == 1) this.$router.push({ name: "NotFound" });
        this.activity = res.data.activity;
      });
    },
    // 更新活动
    async updateActivity() {
      await axios.post("activities/update", this.activity).then(() => {
        this.$router.push("/activities/" + this.activity.id);
      });
    },
  },
  mounted() {
    this.getActInfo();
  },
};
</script>

<style>
</style>